<template>
	<div class="flex_col p10" style="height: 80vh; ">
		<div class="p10 flex_col">
			<label class="flex_center_self">年休查询</label>
			<div class="flex_row_center mt10">
				<label>员工工号:</label>
				<el-input clearable v-model="account" style="width: 150px;" />
				<el-button @click="onClickQuery" type="primary" class="ml5">查询</el-button>
			</div>
		</div>
		<EmplParts v-if="holidayInfo != null" :info="holidayInfo.empl" />
		<div class="flex_col" style="overflow-y: scroll; " v-if="holidayInfo != null">
			<label style="font-size: large; margin-top: 10px;">今年年假详情</label>
			<ServiceParts2 class="flex_start_self m5" 
				v-for="(item, index) in holidayInfo.holiday.holiday_parts"
				:color="activeColor(holidayInfo, index)"
				:key="index" :info="item" />
		</div>
	</div>
</template>

<script setup lang="ts">

import { service, type ServiceYearCalcRes } from '@/service/api';
import { activeColor, dateFormat, selectEmpl } from '@/service/global';
import { runAction } from '@/utils/ui';
import ServiceParts2 from '@/components/ServiceParts2.vue';
import { ref, watch } from 'vue';
import EmplParts from '@/components/EmplParts.vue';

const account = ref<string>(selectEmpl.value.account);
const holidayInfo = ref<ServiceYearCalcRes | null>(null);

watch(selectEmpl, () => {
	account.value = selectEmpl.value.account;
})

async function onClickQuery() {
	runAction('查询中', '', async () => {
		if (account.value.length == 0) {
			throw '请输入员工工号';
		}
		const info2 = await service.calcYearHoliday({
			account: account.value,
			now_date: dateFormat(new Date()),
		});
		holidayInfo.value = info2;
	});
}

</script>

<style scoped></style>
